<template>
	<view class="container">
		<cu-custom isBack isFixed :scrollColor="scrollColor">
			<block slot="content">预约上门</block>
		</cu-custom>
		<view class="form-header" :style="{ paddingTop: CustomBar + 80 + 'px' }">
			<text>10秒预约免费上门评估</text>
			<text>福筑家来提供免费的上门问题判断、户型评估分析服务</text>
			<image class="header-img" src="/static/img/order.png" 
				mode="widthFix" :style="{ top: CustomBar - 20 + 'px' }"></image>
		</view>
		<form class="form" @submit="submit">
			<view class="form-item">
				<view class="title">第一步：选择您需要的服务</view>
				<view class="padding bg-white radius-sm bg-shadow">
					<view class="flex align-center">
						<uni-icons type="cart" size="24"></uni-icons>
						意向产品
					</view>
					<view class="flex">
						<image class="product-img" :src="goods.image" mode="aspectFill"></image>
						<view class="margin-left flex flex-direction justify-between padding-tb-xs">
							<view class="">{{goods.title}}</view>
							<!-- <view class="flex align-center">
								<view class="cu-tag round bg-green light" 
									v-for="(tag, index) in 3" :key="index">
									破坏少
								</view>
							</view> -->
							<view class="margin-top-sm text-sm text-gray text-bold">{{goods.info}}</view>
						</view>
					</view>
					<view class="flex justify-between margin-top align-end">
						<text>{{num}}{{goods.unit}}</text>
						<view class="text-lg">
							<text>支付金额：</text>
							<text class="text-price text-bold text-red">{{price}}</text>
						</view>
					</view>
				</view>
			</view>
			<view class="form-item">
				<view class="title">第二步：填写您的信息，以便免费为您上门</view>
				<view class="form-item-subtitle">
					<uni-icons type="calendar" size="24"></uni-icons>
					<view class="">预约信息</view>
				</view>
				<view class="form-item-subitem">
					<view class="form-item-subitem-title">服务地址</view>
					<view class="form-item-subitem-content" @tap="chooseAddress">
						<input class="form-input" type="text" 
							placeholder="请选择施工地址" v-model="address" disabled>
						<uni-icons type="right" size="20" color="#999"></uni-icons>
					</view>
				</view>
				<view class="form-item-subitem">
					<view class="form-item-subitem-title">门牌号</view>
					<view class="form-item-subitem-content">
						<input class="form-input underline" type="text" name="dong">
						<text class="text-gray">栋</text>
					</view>
					<view class="form-item-subitem-content">
						<input class="form-input underline" type="text" name="danyuan">
						<text class="text-gray">单元</text>
					</view>
					<view class="form-item-subitem-content">
						<input class="form-input underline" type="text" name="fanghao">
						<text class="text-gray">房号</text>
					</view>
				</view>
				<view class="form-item-subitem">
					<view class="form-item-subitem-title">联系人</view>
					<input class="form-input underline" type="text" name="name">
				</view>
				<view class="form-item-subitem">
					<view class="form-item-subitem-title">联系电话</view>
					<input class="form-input underline" type="number" name="mobile">
				</view>
				<view class="form-item-subitem">
					<view class="form-item-subitem-title">上门时间</view>
					<radio-group class="form-radio-group__flex" name="date">
						<label class="form-radio__wrapper" 
							v-for="(item, index) in dates" :key="index">
							<radio :value="item.key" color="#0c8250"/>
							<text>{{item.name}}</text>
						</label>
					</radio-group>
				</view>
			</view>
			<view class="form-item">
				<view class="title">
					第三步：如需要额外信息说明，请点击添加
					<uni-icons v-if="isThird" class="icon" type="minus" size="26" 
						color="rgb(0, 123, 70)" @click="toggleShowThird"></uni-icons>
					<uni-icons v-else class="icon" type="plus" size="26" 
						color="rgb(0, 123, 70)" @click="toggleShowThird"></uni-icons>
				</view>
				<block v-if="isThird">
					<view class="form-item-subtitle">
						<uni-icons type="chat" size="24"></uni-icons>
						<view class="">买家留言</view>
					</view>
					<view class="form-item-subitem">
						<!-- <view class="message-tags__wrapper">
							<view class="message-tags" 
								:class="index==messageCurrent?'message-tags__checked':''"
								v-for="(message, index) in messages" :key="index" 
								@tap="handlerMessageChange(index)">
								<text>{{message.name}}</text>
							</view>
						</view> -->
						<textarea class="form-input__area" placeholder="请输入详细描述"
							placeholder-style="font-size: 30rpx;"></textarea>
					</view>
					<view class="form-item-subtitle">
						<uni-icons type="camera" size="24"></uni-icons>
						<view class="">拍照上传</view>
					</view>
					<view class="form-item-images col-3">
						<view class="form-item-image" 
							v-for="(image, index) in images" :key="index"
							@tap="viewImage(index)">
							<image :src="image" mode="aspectFill"></image>
							<view class="image-close" @tap.stop="deleteImage(index)">
								<uni-icons type="closeempty" size="16" color="#fff"></uni-icons>
							</view>
						</view>
						<view v-if="images.length<9"
							class="form-item-image form-item-image__wrapper" 
							@tap="chooseImage((9 - images.length))">
							<uni-icons class="image-add" type="camera-filled" 
								size="26" color="rgb(211,212,214)"></uni-icons>
						</view>
					</view>
				</block>
			</view>
			<button class="form-submit-btn" form-type="submit">立即预约</button>
		</form>
	</view>
</template>

<script>
	import { BASE_URL, confirmOrder } from '@/common/api/auth'
	import graceChecker from "@/common/graceChecker.js"
	export default {
		data() {
			return {
				CustomBar: this.CustomBar,
				baseUrl: BASE_URL,
				scrollColor: 'rgba(255, 255, 255, 0)',
				goods: {},
				num: 0,
				address: '',
				lat: '',
				lng: '',
				dates: [{
					name: '立即',
					key: '1'
				},{
					name: '三天内',
					key: '2'
				},{
					name: '七天内',
					key: '3'
				}],
				// messages: [{
				// 	name: '极速上门',
				// 	key: '1'
				// },{
				// 	name: '有事电话',
				// 	key: '2'
				// },{
				// 	name: '请勿用力敲门',
				// 	key: '3'
				// }],
				// messageCurrent: -1,
				marker: '',
				images: [],
				isThird: false,
			}
		},
		onLoad(options) {
			let goods = JSON.parse(decodeURIComponent(options.goods))
			this.num = options.num
			if(goods&&goods.id) {
				this.goods = goods
			}
		},
		computed: {
			price() {
				return (this.num * this.goods.price).toFixed(2)
			}
		},
		methods: {
			handlerRadioChange(e) {
				for(let i in this.types) {
					if(e.detail.value == this.types[i].key) {
						this.radioCurrent = i
						break
					}
				}
			},
			chooseAddress() {
				uni.chooseLocation({
					success: res => {
						this.address = res.name
						this.lat = res.latitude
						this.lng = res.longitude
					}
				})
			},
			toggleShowThird() {
				this.isThird = !this.isThird
			},
			handlerMessageChange(i) {
				this.messageCurrent = i
			},
			chooseImage(count) {
				const that = this
				uni.chooseImage({
					count: count,
					sizeType: ['original', 'compressed'],
					sourceType: ['album'],
					success: (res) => {
						res.tempFilePaths.forEach(filePath => {
							this.compressImage(filePath).then(compressImageRes => {
								uni.uploadFile({
									url: that.baseUrl + '/api/common/upload', //接口地址
									header: { 
										"token": uni.getStorageSync('token')
									},
									filePath: compressImageRes.tempFilePath,
									name: 'file',
									formData: {
										"category": ''
									},
									success: uploadFileRes => {
										uni.hideLoading();
										if(uploadFileRes.statusCode == 200) {
											let data = JSON.parse(uploadFileRes.data);
											if(data.code == 1) {
												that.images.push(data.data.fullurl)
											}
										}
									}
								})
							})
						})
					}
				})
			},
			compressImage(img) {
				return new Promise((resolve, reject) => {
					uni.compressImage({
						src: img,
						quality: 50,
						compressedWidth: (375 * 4),
						success: res => {
							resolve(res)
						}
					})
				})
			},
			viewImage(index) {
				uni.previewImage({
					current: index,
					urls: this.images
				})
			},
			deleteImage(index) {
				uni.showModal({
					content: '是否确定删除图片',
					confirmText: '删除',
					confirmColor: 'rgb(0, 123, 70)',
					success: res => {
						if(res.confirm) {
							this.images.splice(index, 1)
						}
					}
				})
			},
			submit(e) {
				let address = this.address + e.detail.value.dong + '栋' + e.detail.value.danyuan + '单元' + e.detail.value.fanghao + '房号'
				let params = {
					goods_id: this.goods.id,
					lat: this.lat,
					lng: this.lng,
					address: address,
					name: e.detail.value.name,
					mobile: e.detail.value.mobile,
					time: e.detail.value.date,
					num: 1
				}
				if(this.isThird) {
					params['mark'] = this.marker
					params['images'] = this.images.join(',')
				}
				// if(!params.goods_id) {
				// 	return this.$tools.msg("请选择服务类型")
				// }
				// if(!params.lat||!params.lng) {
				// 	return this.$tools.msg("请选择施工地址")
				// }
				if(!e.detail.value.dong||!e.detail.value.danyuan||!e.detail.value.fanghao) {
					return this.$tools.msg("请填写您的门牌号信息")
				}
				if(!params.time) {
					return this.$tools.msg("请选择上门时间")
				}
				if(!params.name) {
					return this.$tools.msg("请填写联系人姓名")
				}
				let rule = [{
					name: 'mobile',
					checkType: 'phoneno',
					errorMsg: '请填写正确的手机号码'
				}]
				var checkRes = graceChecker.check(params, rule)
				if (!checkRes) return this.$tools.msg(graceChecker.error)
				
				const that = this
				confirmOrder(params).then(res => {
					if(res&&res.code == 1) {
						that.$tools.msg("预约成功")
						setTimeout(() => {
							that.$tools.to('/pages/order/list?type=0')
						}, 500)
					}
				})
			}
		},
		onPageScroll(e) {
			let scrollTop = e.scrollTop
			let opacity = (scrollTop/100)>1?1:(scrollTop/100)
			this.scrollColor = `rgba(255, 255, 255, ${opacity})`
		}
	}
</script>

<style scoped>
	.form-header {
		position: relative;
		display: flex;
		flex-direction: column;
		padding-bottom: 20rpx;
		padding-left: 30rpx;
		padding-right: 30rpx;
		font-size: 30rpx;
		background-image: linear-gradient(rgb(0, 123, 70), rgba(255, 255, 255) 95%);
	}
	.form-header text:first-child {
		font-weight: 700;
		font-size: 42rpx;
	}
	.form-header text {
		margin-top: 10rpx;
	}
	.form-header .header-img {
		position: absolute;
		width: 260rpx;
		height: 200rpx;
		right: 60rpx;
		opacity: .2;
	}
	.form {
		display: block;
		padding-bottom: 40rpx;
		font-size: 30rpx;
	}
	.form-item {
		margin-top: 60rpx;
		padding: 40rpx 30rpx;
	}
	.form-item .title {
		position: relative;
		display: flex;
		align-items: center;
		font-size: 32rpx;
		font-weight: 700;
		color: rgb(0, 123, 70);
		padding-left: 20rpx;
		margin-bottom: 50rpx;
	}
	.form-item .title::before {
		content: "";
		display: block;
		position: absolute;
		width: 4rpx;
		height: 40rpx;
		margin: auto 0;
		left: 0;
		background-color: rgb(0, 123, 70);
	}
	.form-item-subtitle {
		display: flex;
		align-items: center;
		color: #333;
		margin: 0 20rpx 20rpx;
	}
	.form-item-subtitle image {
		width: 46rpx;
		height: auto;
		margin-right: 10rpx;
	}
	.form-item-subitem {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		line-height: 80rpx;
		margin: 0 20rpx;
	}
	.form-item-subitem .form-item-subitem-title {
		width: 160rpx;
		margin-right: 30rpx;
	}
	.form-item-subitem .form-item-subitem-content {
		display: flex;
		align-items: center;
		flex: 1;
	}
	.form-input {
		flex: 1;
		padding: 0 20rpx;
	}
	.form-radio-group__flex {
		width: 100%;
		display: flex;
		gap: 30rpx;
	}
	.form-radio-group__flex .form-radio__wrapper {
		height: unset;
	}
	.form-radio-group__flex .form-radio__wrapper text {
		margin-left: 16rpx;
	}
	.form-submit-btn {
		background-color: rgb(0, 123, 70);
		color: #FFFFFF;
		width: 80%;
		border-radius: 999999rpx;
		margin-top: 20rpx;
		font-size: 30rpx;
		font-weight: bold;
	}
	.underline {
		border-bottom: 1rpx solid #999;
	}
	.form-item-subitem .form-input__area {
		margin-bottom: 40rpx;
		padding: 20rpx;
		width: 100%;
		height: 240rpx;
		border-radius: 20rpx;
		line-height: 1.2;
		background-color: rgb(246, 246, 246);
	}
	/deep/uni-radio .uni-radio-input,
	/deep/radio .wx-radio-input {
		border-radius: 50%;
		width: 30rpx;
		height: 30rpx;
	}
	/deep/uni-radio .uni-radio-input.uni-radio-input-checked,
	/deep/radio .wx-radio-input.wx-radio-input-checked {
		border-color: #0c8250 !important;
		background: #0c8250 !important;
	}
	/deep/uni-radio .uni-radio-input.uni-radio-input-checked::before, 
	/deep/radio .wx-radio-input.wx-radio-input-checked::before {
		font-size: 28rpx;
		transform: translate(-50%,-50%) scale(.7);
		-webkit-transform: translate(-50%,-50%) scale(.7);
	}
	/deep/uni-radio::before, uni-checkbox::before,
	/deep/radio::before, checkbox::before {
		margin-top: -16rpx;
		right: 4rpx;
	}
	
	.message-tags__wrapper {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		gap: 30rpx;
		margin-bottom: 20rpx;
	}
	.message-tags {
		padding: 2rpx 26rpx;
		border-radius: 999999rpx;
		height: 52rpx;
		line-height: 52rpx;
		background-color: rgb(235, 235, 235);
		color: #999;
	}
	.message-tags.message-tags__checked {
		background-color: rgb(0, 123, 70);
		color: #fff;
	}
	.form-item-images {
		display: grid;
		gap: 30rpx;
		width: 86%;
		margin: 0 auto 0 20rpx;
	}
	.form-item-images.col-3 {
		grid-template-columns: repeat(3, 1fr);
	}
	
	.form-item-image {
		position: relative;
		background-color: rgb(244, 245, 246);
		width: 100%;
		padding-bottom: 100%;
		border-radius: 6rpx;
	}
	.form-item-image .image-add {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
	}
	.form-item-image image {
		position: absolute;
		width: 100%;
		height: 100%;
	}
	.form-item-image .image-close {
		position: absolute;
		right: 0;
		top: 0;
		width: 40rpx;
		height: 40rpx;
		line-height: 40rpx;
		text-align: center;
		background-color: rgba(0, 0, 0, .5);
	}
	
	.product-img {
		width: 160rpx;
		height: 160rpx;
		border-radius: 20rpx;
	}
</style>